// 大模块

import Taro from '@tarojs/taro'
import { useDispatch } from 'react-redux'
import { Navigator, View, Image, Block } from '@tarojs/components'

import './mall.less'

function Maxmoudles({ data }) {
  const dispatch = useDispatch()
  if (data.length === 0) {
    return null
  }
  /**
   * 跳转到外链
   */
 function navigateToOutside(e) {
    const { index } = e.currentTarget.dataset
    let PATH = 'subs/website/pages/outside/outside'
    const item = this.data.maxMoudles[+index]

    const jumpConfigJson = JSON.parse(item.jumpConfigJson) || ''

    if (jumpConfigJson) {
      // 适配第三方h5跳转
      PATH = jumpConfigJson.params.packagePath
      item.jumpConfigJsonTemp = jumpConfigJson
      dispatch({
        type: 'WebviewDetail',
        payload: item
      })
    }
    const url = `/${PATH}?title=${encodeURIComponent(
      item.title
    )}&weburl=${encodeURIComponent(item.jumpUrl)}`
    Taro.navigateTo({
      url: url
    })
  }



  return (
    <View className='max-moudle-content-view'>
      <Block>
        <View className>
          <View className='d_between_center'>
            <Navigator
              hoverClass='none'
              url='/subs/interactive/pages/activity/activity?type=0'
              className='max_moudle_1'
            >
              <View className='max_moudle_text'>
                {data[0].title}
              </View>
              <Image
                src={data[0].icon}
                className='max_module_img'
              ></Image>
            </Navigator>
            <View className='d_column_center'>
              <Navigator
                hoverClass='none'
                url='/subs/interactive/pages/say/say'
                className='max_moudle_2'
              >
                <View className='max_moudle_text'>
                  {data[1].title}
                </View>
                <Image
                  src={data[1].icon}
                  className='module_img'
                ></Image>
              </Navigator>
              <Navigator
                hoverClass='none'
                url='/subs/interactive/pages/activity/activity?type=1'
                style='margin-top:18rpx'
                className='max_moudle_2'
              >
                <View className='max_moudle_text'>
                  {data[2].title}
                </View>
                <Image
                  src={data[2].icon}
                  className='module_img'
                ></Image>
              </Navigator>
            </View>
          </View>
        </View>
        {data[3].isEnabled === 1 && (
          <View style='margin-top:18rpx' className='d_between_center'>
            <View
              data-index='3'
              onClick={navigateToOutside}
              className='max_moudle_2'
            >
              <View className='max_moudle_text'>
                {data[3].title}
              </View>
              <Image
                src={data[3].icon}
                className='module_img'
              ></Image>
            </View>
            {data[4].isEnabled === 1 && (
              <View
                data-index='4'
                onClick={navigateToOutside}
                className='max_moudle_2'
              >
                <View className='max_moudle_text'>
                  {data[4].title}
                </View>
                <Image
                  src={data[4].icon}
                  className='module_img'
                ></Image>
              </View>
            )}
          </View>
        )}
      </Block>
    </View>
  )
}
export { Maxmoudles }